<template>
  <div>
    <hom-header></hom-header>
    <div class="container">
      <!-- 左侧分类 -->
      <HomeCategory />
      <!-- 轮播图 -->
      <HomeBanner></HomeBanner>
    </div>
    <CanvasPage :terminal="4" :typeId="1"></CanvasPage>
  </div>
</template>

<script>
import { getIntegralRatioAPI } from '@/api/user/order.js'
import HomeBanner from './components/home-banner.vue'
import HomeCategory from './components/home-category'
import CanvasPage from '@/components/canvasShow/canvasShowPage'
import HomHeader from '@/components/base/homHeader'
import { getCategory } from '@/api/nav.js'
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'index',
  components: {
    HomHeader,
    CanvasPage,
    HomeBanner,
    HomeCategory
  },
  computed: {
    ...mapGetters(['wrapCategoryList'])
  },
  data() {
    return {
      canvasData: []
    }
  },
  created() {
    this.getCategoryData()
    this.getIntegralRatio()
  },
  mounted() {},
  methods: {
    ...mapMutations({
      setWrapcList: 'SET_WRAPCATEGORYLIST',
      setWrapcListNew: 'SET_WRAPCATEGORYLISTNEW'
    }),
    // convertToTreeData (data) {
    // const resultMap = {}
    // const resultArray = []

    // data.forEach(item => {
    //     const { classifyId, classifyName, classifyPid } = item
    //     resultMap[classifyId] = { classifyId, classifyName, subcategories: [] }
    //     if (classifyPid === '0') {
    //         resultArray.push(resultMap[classifyId])
    //     } else {
    //         resultMap[classifyPid].subcategories.push(resultMap[classifyId])
    //     }
    // })

    // return resultArray
    // },
    arr2Tree(arr, pid) {
      // 根据 pid，查找到的子部门，都放到这个 result 中
      const result = []
      arr.forEach(item => {
        // 循环 arr 中的每一个部门，判断当前循环项，是否为 pid 的子部门
        if (item.classifyPid == pid) {
          result.push(item)
          // 查找 item 这个部门下，是否有子部门，得到的子部门用 son 接收
          const son = this.arr2Tree(arr, item.classifyId)
          if (son.length !== 0) {
            // 如果 son.length 不为0，证明 item 下，有所属的子部门
            item.children = son
          }
        }
      })

      // 只要上面的 forEach 执行完啦，那么 result 中存储的，就是 pid 下面的所有子部门
      return result
    },
    async getIntegralRatio() {
      const res = await getIntegralRatioAPI({
        name: 'credit_exchange_rate'
      })
      this.$store.commit('INTEGRAL_RATIO', parseFloat(res.data.data.dictDescribe))
    },
    async getCategoryData() {
      const response = await getCategory({
        //  classifyId: '',
      })
      // console.log(response.data)
      const res = response.data
      if (res.code === '200') {
        this.setWrapcListNew(this.arr2Tree(res.data, '0'))
        // console.log(this.setWrapcListNew)
        // this.setWrapcList(res.data)
      }
    }
  }
}
</script>
<style lang="scss" scope>
.container {
  position: relative;
  display: flex;
  width: 1240px;
  margin: 0 auto;
  margin-top: 10px;
  height: 500px;
  // overflow: hidden;
}
</style>
